<template>
 <div id="app">
   <Header></Header>
   <router-view class="music-content"/>
   <SongAudio></SongAudio>
   <ScrollTop></ScrollTop>
   <Footer></Footer>
 </div>
</template>

<script>
import Header from "@/components/Header";
import ScrollTop from "@/components/ScrollTop";
import Footer from "@/components/Footer";
import SongAudio from "@/components/SongAudio";
export default {
  name: 'App',
  components:{
    Header,ScrollTop,Footer,SongAudio
  },
  created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
      this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    }

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
      sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}
</script>

<style lang="scss" scoped>
@import "./assets/css/app.scss";
</style>
